<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../files/template.css">
</head>
<body>
    <script type="module">
        import * as THREE from "../build/three.module.js";
        import {OrbitControls} from "../assets/jsm/controls/OrbitControls.js";
        import { GUI } from '../assets/jsm/libs/dat.gui.module.js';

        // 初始化场景
        let scene,camera,renderer,control;
        let box,faceBottom,faceLeft,faceRight,faceNear,faceFar,faceTop;

        let progress,gui,setting;

        progress = { // 控制进度的一些参数,函数
            autoPlay:true,
            now:0,
            stepSize:0.005,
            start:0,
            middle:0.5,
            end:1,
            open:function(){
                this.now=this.middle;
            },
            close:function(){
                this.now=this.start;
            }
        };

        function createGUI(){
            setting = {
                autoPlay:true
            }
            gui = new GUI();
            let playFolder = gui.addFolder('进度控制');
            playFolder.add(progress,'autoPlay').name("自动播放");
            playFolder.add(progress, "now", 0, 1, 0.01).name("进度条");
            playFolder.add(progress, "open").name("打开");
            playFolder.add(progress, "close").name("合拢");

            playFolder.open();
        }


        (function init(){
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 2000); 
            renderer =  new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight); 
            document.body.appendChild(renderer.domElement); 
            camera.position.z = 10;
            control = new OrbitControls(camera, renderer.domElement);

            box = new THREE.Group();
            scene.add(box);
            faceBottom = createFace([
                new THREE.Vector3( -1, 0, 1),
                new THREE.Vector3( -1, 0, -1),
                new THREE.Vector3( 1, 0, -1),
                new THREE.Vector3( 1, 0, 1),
            ]);
            box.add(faceBottom);

            faceLeft = createFace([
                new THREE.Vector3( 0, 0, 1),
                new THREE.Vector3( 0, 0, -1),
                new THREE.Vector3( 0, 2, -1),
                new THREE.Vector3( 0, 2, 1),
            ]);
            faceLeft.position.x = -1;
            faceBottom.add(faceLeft);

            faceRight = createFace([
                new THREE.Vector3( 0, 0, 1),
                new THREE.Vector3( 0, 0, -1),
                new THREE.Vector3( 0, 2, -1),
                new THREE.Vector3( 0, 2, 1),
            ]);
            faceRight.position.x = 1;
            faceBottom.add(faceRight);

            faceNear = createFace([
                new THREE.Vector3( 1, 0, 0),
                new THREE.Vector3( -1, 0, 0),
                new THREE.Vector3( -1, 2, 0),
                new THREE.Vector3( 1, 2, 0),
            ]);
            faceNear.position.z = 1;
            faceBottom.add(faceNear);

            faceFar = createFace([
                new THREE.Vector3( 1, 0, 0),
                new THREE.Vector3( -1, 0, 0),
                new THREE.Vector3( -1, 2, 0),
                new THREE.Vector3( 1, 2, 0),
            ]);
            faceFar.position.z = -1;
            faceBottom.add(faceFar);

            faceTop = createFace([
                new THREE.Vector3( -1, 0, 2),
                new THREE.Vector3( -1, 0, 0),
                new THREE.Vector3( 1, 0, 0),
                new THREE.Vector3( 1, 0, 2),
            ]);
            faceTop.position.y = 2;
            faceFar.add(faceTop); // 注意faceTop这个面是和faceFar相连的,所以给它加到faceFar下
        })();
        function createFace(points) {
            // 面
            let geometry = new THREE.Geometry();
            geometry.vertices.push( points[0], points[1], points[2], points[3] );
            geometry.faces.push( new THREE.Face3( 0, 1, 2), new THREE.Face3( 2, 3, 0));
            let material = new THREE.MeshBasicMaterial( { color : 0xff0000 } );
            material.side =  THREE.DoubleSide;
            let face = new THREE.Mesh( geometry, material );

            // 线框
            let geometry2 = new THREE.WireframeGeometry(geometry);
            let material2 = new THREE.LineBasicMaterial({color: 0xffff00});
            let line = new THREE.LineSegments( geometry2, material2 );

            let group = new THREE.Group();
            group.add(face, line);
            return group;
            // return new THREE.Mesh( geometry, material );
        }
        createGUI();
        
        function animate() {
            gui.updateDisplay();

            requestAnimationFrame(animate);
            if(progress.autoPlay){
                progress.now=(progress.now+progress.stepSize)%progress.end;
            }
            if ( progress.now < progress.middle ) { // 展开立方体
                faceLeft.rotation.z = Math.PI * progress.now;
                faceRight.rotation.z = -Math.PI * progress.now
                faceNear.rotation.x = Math.PI * progress.now
                faceFar.rotation.x = -Math.PI * progress.now;
                faceTop.rotation.x = -Math.PI * progress.now;
// Math.PI * 0.5
            } 
            else { // 合并立方体
                faceLeft.rotation.z = Math.PI * (1-progress.now);
                faceRight.rotation.z = -Math.PI * (1-progress.now);
                faceNear.rotation.x = Math.PI * (1-progress.now);
                faceFar.rotation.x = -Math.PI * (1-progress.now);
                faceTop.rotation.x = -Math.PI * (1-progress.now);
            }
            renderer.render(scene,camera);
        }

        animate();

        window.progress=progress;
        window.renderer=renderer;
        window.setting=setting;
    </script>
</body>
</html>